<template>
    <div class="message" :style="style">{{message}}</div>
</template>

<script type="text/javascript">
/**
 * @Author dingxing [2022-08-11 14:54:46]
 * @Description 
 */
export default {
    name: '',
    components: {
    },

    props: {
        // 消息内容
        message: {
            type: String,
            default: ""
        },
        // 消息类型 绿色或者红色
        type: {
            type: String,
            default: "success"
        },
    },

    data() {
        return {
            style: ''
        }
    },

    watch: {},

    created() {
        if (this.type == 'success') {
            this.style = 'color:green'
        } else if (this.type == 'error') {
            this.style = 'color:red'
        }
    },

    mounted() {
    },

    methods: {
    }
}
</script>

<style lang="less" scoped>
.message {
    width: 300px;
    text-align: center;
    position: fixed;
    padding: 5px 0;
    top: 100px;
    background: rgb(192, 228, 226);
    transform: translateX(-50%);
    left: 50%;
    border-radius: 10px;
    animation: animate 1s;
    @keyframes animate {
        0% {
            top: 200px;
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}
</style>